<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./static/fav.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EBookmark</title>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/bookmark.css">

    <script src="./static/js/encrypto.js"></script>
    <script src="./static/js2/user.js"></script>
    <script src="./static/js/common.js"></script>
</head>
<body>
<div id="app" v-clock>

    <!-- header -->
    <div class="app-header">
        <div class="header-left">
            <a class="navbar-item" href="./index.html">Password</a>
            <span class="navbar-item active">Bookmark</span>
            <a class="navbar-item" href="./help.html">Help</a>
        </div>

        <div class="header-right">
            <button class="btn btn-primary" v-if="env == ENV_SERVER" @click="saveToLocalhost">Save To File</button>
            <a id="server-link" class="navbar-item" href="http://localhost:5020/" target="_blank" v-if="env == ENV_FILE">localhost:5020</a>
            <div class="navbar-item app-username">
                <div id="app-username">{{ username }}</div>
                <list class="app-header-dropdown">
                    <li id="to-login">Logout</li>
                </list>
            </div>
        </div>
    </div>

    <div class="right-slide">
        <div class="search-sidebar" >
            <input type="search" class="search-input" placeholder="Search By Group Name" 
                @input="search" v-model="searchKeyword">
        </div>
        <ul class="search-list" v-show="searchShowed">
            <li v-for="(item, searchIndex) in searchList" :key="item.id" @click="searchSelect(item)" 
                :class="{'active': searchActiveIndex == searchIndex}">
                <div v-if="searchKeyword">
                    <span>{{ item.title.toLowerCase().split(searchKeyword)[0] }}</span><span style="color: red">{{ searchKeyword }}</span><span>{{ item.title.toLowerCase().split(searchKeyword)[1] || "" }}</span>
                </div>
                <div v-else>{{ item.title }}</div>
            </li>
        </ul>
    </div>

    <!-- sliderbar -->
    <div class="slidebar" @click.stop>
        <div class="slidebar-menu-title">
            <span class="flex-main">Classify</span>
            <!-- <input type="search" class="flex-main input-search" v-model="searchedClassify"> -->
            <span class="bm-add" @click.stop="showAddCompany" title="Add Classify"></span>
        </div>
        <ol class="slidebar-menu flex-main">
            <li v-for="(menu, index) in menuList" 
                v-show="menu.title.toLowerCase().indexOf(searchedClassify) >= 0"
                :class="{active: index == menuIndex}" :key="index">
                <a href="javascript:;" @click="menuIndex = index" class="slidebar-item" >
                    <span style="margin-right: 5px;">{{ index + 1 }}.</span>
                    <span class="flex-main">{{ menu.title }}(<span class="sub-title">{{ menu.orders }}</span>)</span>
                    <span class="hover-show bm-add" @click.stop="showAddGroup(menu.id)" title="Add 组"></span>
                    <span class="hover-show bm-operator" @click.stop="showEditCompany(menu)" title="Update分类"></span>
                </a>
            </li>
        </ol>
    </div>

    <!-- main -->
    <div class="page-main">
        <div class="bookmarks-section">
            <div class="bookmarks" v-for="group in groupList" :key="'g_' + group.id"
                v-if="group.hidden == 1 || !hiddened" >
                <!-- group header -->
                <div class="bookmarks-title">
                    <span class="flex-main">{{ group.title }}</span>
                    <span class="bm-add" @click="showAddBookmark(group.id)" title="Add书签"></span>
                    <span class="bm-operator" @click="showEditGroup(group)" title="Update组"></span>
                </div>
                <!-- anchor -->
                <div class="anchor" :id="group.title"></div>

                <!-- item -->
                <div class="bookmark" v-for="bookmark in findBookmarkByParentId(group.id)" 
                    v-if="bookmark.hidden == 1 || !hiddened"
                    :key="group.id + '_' + bookmark.id">
                    <img :src="bookmark.icon" class="bookmark-icon" v-if="bookmark.type == 3 && bookmark.icon" alt=""/>
                    <div class="bookmark-icon" v-else style="background-image: url(./static/images/web.png);"></div>

                    <div class="bookmark-title">
                        <a class="outer-link" :data-href="bookmark.url" target="_blank">{{ bookmark.title }}</a>
                    </div>

                    <div class="bm-operator" @click="showEditBookmark(bookmark)"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- popup -->
    <div class="popup-wrap" :class="{'popup-showed': bookmarkVisible}">
        <div class="popup-bg" @click="bookmarkVisible = false"></div>

        <div class="popup">
            <div class="popup-hd">
                <span v-if="bookmarkLevel == 1 && bookmarkDoing == 'add'">Add Classify</span>
                <span v-if="bookmarkLevel == 1 && bookmarkDoing == 'edit'">Edit Classify</span>

                <span v-if="bookmarkLevel == 2 && bookmarkDoing == 'add'">Add Group</span>
                <span v-if="bookmarkLevel == 2 && bookmarkDoing == 'edit'">Edit Group</span>

                <span v-if="bookmarkLevel == 3 && bookmarkDoing == 'add'">Add Bookmark</span>
                <span v-if="bookmarkLevel == 3 && bookmarkDoing == 'edit'">Edit Bookmark</span>
            </div>

            <div class="popup-bd" style="padding: 20px 50px 20px 10px;">
                <!-- level -->
                <div class="form-group" v-if="bookmarkLevel == 1">
                    <div class="form-label">Classify Title</div>
                    <input type="text" class="form-control" v-model="bookmarkEditing.title" v-focus>
                </div>

                <!-- level 2 -->
                <template v-if="bookmarkLevel == 2">
                    <div class="form-group">
                        <div class="form-label">Classify</div>
                        <select class="form-control" v-model="bookmarkEditing.parentId">
                            <option :value="menu.id" v-for="(menu, menuIndex) in menuList" :key="menu.id">{{ menu.title }}</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="form-label">Group Title</div>
                        <input type="text" class="form-control" v-model="bookmarkEditing.title" v-focus>
                    </div>
                </template>

                <!-- level 3 -->
                <template v-if="bookmarkLevel == 3">
                    <div class="form-group">
                        <div class="form-label">Group</div>
                        <select class="form-control" v-model="bookmarkEditing.parentId">
                            <optgroup v-for="menu in menuList" :label="menu.title" :key="menu.id">
                                <option v-for="group in menu.groupList" :key="menu.id + '_' + group.id" 
                                    :value="group.id">{{ group.title }}</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="form-label">Bookmark Title</div>
                        <input type="text" class="form-control" v-model="bookmarkEditing.title" v-focus>
                    </div>

                    <div class="form-group">
                        <div class="form-label">Bookmark URL</div>
                        <input type="text" class="form-control" v-model="bookmarkEditing.url" @blur="setFavicon(false)">
                    </div>

                    <div class="form-group">
                        <div class="form-label">Website Icon</div>
                        <div class="control-group">
                            <img :src="bookmarkEditing.icon" alt="" class="bm-icon" v-if="bookmarkEditing.icon">
                            <img :src="getDefaultFavicon()" alt="" v-else class="bm-icon">
                            <input type="text" class="form-control" v-model="bookmarkEditing.icon" placeholder="请输入链接">
                        </div>
                    </div>
                </template>

                <!-- common -->
                <div class="form-group">
                    <div class="form-label">Order</div>
                    <input type="number" class="form-control" v-model="bookmarkEditing.orders">
                </div>
                <div class="form-group" v-if="!hiddened">
                    <div class="form-label">Hidden</div>
                    <input type="number" class="form-control" v-model="bookmarkEditing.hidden">
                </div>
            </div>

            <div class="popup-ft">
                <button class="btn btn-warn" v-if="bookmarkDoing == 'edit'" @click="removeBookmark">Delete</button>

                <button class="btn btn-primary btn-plain" v-if="bookmarkDoing == 'add'" @click="addBookmark">Add</button>
                <button class="btn btn-primary btn-plain" v-else @click="saveBookmark">Update</button>

                <button class="btn btn-info" @click="bookmarkVisible = false">Cancel</button>
            </div>
        </div>
    </div>

    <!-- toast -->
    <div class="toast" :class="{active: toastVisible}">
        <em class="iconfont icon-info"></em>
        <span>{{ toastContent }}</span>
    </div>
</div>

<script src="./static/js/vue.min.js"></script>

<script src="./static/js2/bookmark.js"></script>
<script src="./static/js/bookmark.js"></script>
</body>
</html>